// /   事件的回调

//foo = () => {}和sayHello() {}区别
// 1️⃣ 定义方式不同
// class A {
//   // 传统方法
//   sayHello() {
//     console.log(this);
//   }
//   // 箭头函数方法
//   foo = () => {
//     console.log(this);
//   }
// }

// sayHello() 是 类的原型方法，也就是说：
// A.prototype.sayHello // 存在

// foo = () => {} 是 实例字段，每个实例都会有一份自己的 foo 方法：
// const a = new A();
// a.foo // 是实例的属性，不在原型上
// A.prototype.foo // undefined

//   this 绑定不同
// sayHello() 是普通函数，调用方式决定 this：
// const a = new A();
// const fn = a.sayHello;
// fn(); // this -> undefined（严格模式下），不是 a
import React, { Component } from "react";

// 体验类组件react18版本之前的，生命周期没剔除
class TestMy extends Component {
  // 可省略
  constructor(props) {
    super(props);
    console.log(this);

    // this.state({
    //   count: 0,
    // })
  }

  // Dom获取
  divRef = React.createRef();
  // 语法糖
  state = {
    count: 0,
  };
  //1. 要么改为箭头函数  this.addcount=this.addcount.bind(this)

  addcount = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  // 只有接受新的props变化才会触发  废  弃
  componentWillReceiveProps(props) {
    console.log("生命周期", "接收新属性", props);
  }
  //   类组件的声明周期  废弃
  componentWillMount() {
    console.log("生命周期", "挂载前");
  }
  static getDerivedStateFromProps(props, state) {
    console.log("生命周期", "获取属性");
    return null;
  }

  componentDidMount() {
    console.log("生命周期", "渲染");
    console.log(this.divRef.current, "类组件");
  }
  //  废  弃
  componentWillUpdate() {
    console.log("生命周期", "更新前");
  }

  // 新的 getSnapshotBeforeUpdate 生命周期是在变异发生前调用的（例如在 DOM 更新之前）
  // // 。该生命周期的返回值将作为第三个参数传递给 componentDidUpdate。（
  // 这个生命周期通常不需要，但在重新渲染时手动保持滚动位置时非常有用。）
  getSnapshotBeforeUpdate(prevProps, prevState) {
    return "ss";
  } //代替

  componentDidUpdate() {
    console.log("生命周期", "更新");
  }
  shouldComponentUpdate() {
    console.log("生命周期", "是否更新");
    return true; // 返回true允许更新，返回false阻止更新
  }

  componentWillUnmount() {
    console.log("生命周期", "销毁");
  }
  render() {
    return (
      <div className="list" ref={this.divRef}>
        类组件的使用--{this.state.count}
        <button onClick={this.addcount}> +1</button>
        <Father></Father>
      </div>
    );
  }
}

class Son extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        子组件————{this.props.msg}
        <button onClick={() => this.props.onSonfn("子传递父")}>子传递父</button>
      </div>
    );
  }
}
class Father extends Component {
  state = {
    msg: "我是father信息",
  };
  getSOn = function (playload) {
    console.log(playload);
  };
  render() {
    return (
      <div>
        我是父组件
        <Son msg={this.state.msg} onSonfn={this.getSOn}></Son>
      </div>
    );
  }
}
export default TestMy;
